<template>
  <div style="min-height: 450px">
    <div style="padding: 10px 10px" class="whiteBox">
      <Tab
        :show-back="true"
        :tabs="tabColumns"
        :active-name="activeName"
        @handleTabClick="handleTabClick"
      />
    </div>
    <div v-show="activeName === '1'">
      <div class="order-detail">
        <!-- <ReceiptTableComponents ref="detailTabList1" :value="ruleFrom" /> -->
        <BoxListComponent
          ref="detailTabList1"
          :url="'/wms/receiptOrderDetail/list'"
          :methodType="'post'"
          :return-data="returnBoxData"
          :params="{
            ...queryParams,
            receiptOrderId: this.$route.query.id || this.ruleFrom.id,
            receiptOrderStatus: '',
          }"
          :pageReq="pageReq"
          :isReasonText="true"
          :WAR="false"
          :styleBox="'height: calc(100vh - 210px);overflow: auto;'"
        />
      </div>
    </div>
    <div v-show="activeName === '3'">
      <BoxListComponent
        ref="detailTabList3"
        :url="'/wms/receiptOrderDetail/list'"
        :methodType="'post'"
        :return-data="returnBoxData"
        :params="{
          ...queryParams,
          receiptOrderId: this.$route.query.id || this.ruleFrom.id,
          receiptOrderStatus: 9,
        }"
        :pageReq="pageReq"
        :WAR="false"
        :isReasonText="true"
        :styleBox="'height: calc(100vh - 210px);overflow: auto;'"
      />
    </div>
    <div v-show="activeName === '2'">
      <CommonFile
        ref="detailTabList2"
        :service-id="ruleFrom.id"
        service-type="IN_WAREHOUSE"
      />
    </div>
  </div>
</template>
<script>
import Tab from "@/components/Tab/detailTab.vue";
import BoxListComponent from "@/views/wms/boxList/BoxList/index.vue";
import ReceiptTableComponents from "./receiptTableComponents.vue";
import CommonFile from "@/components/File/index.vue";
export default {
  components: { Tab, BoxListComponent, ReceiptTableComponents, CommonFile },
  props: {
    ruleFrom: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  filters: {
    statusFilter(newVal) {
      return (
        (DispatchStatusEnum.find((c) => c.value === newVal) || {}).label || "--"
      );
    },
  },
  data() {
    return {
      activeName: "1",
      columns: [
        { prop: "itemId", label: this.$t("order.itemId") },
        { prop: "productName", label: this.$t("order.productName") },
        { prop: "productQuantity", label: this.$t("common.count") },
        { prop: "productPrice", label: this.$t("common.price") },
        { prop: "productTotalPrice", label: this.$t("fiance.amount") },
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      pageReq: {
        page: 1,
        size: 10,
      },
    };
  },
  computed: {
    tabColumns() {
      let base = [];
      let file = [
        {
          name: this.$t("common.files"),
          value: "2",
        },
      ];
      if (this.ruleFrom.type === "SKU") {
        base = [
          {
            name: this.$t("common.SKUDetail"),
            value: "1",
          },
        ];
      } else if (this.ruleFrom.type === "BOX") {
        base = [
          {
            name: this.$t("common.BoxDetails"),
            value: "1",
          },
          {
            name: this.$t("common.AbnormalBoxDetails"),
            value: "3",
          },
        ];
      }
      return [...base, ...file];
    },
  },
  created() {
    this.getList();
  },
  methods: {
    handleTabClick(v) {
      this.activeName = v;
      const name = "detailTabList" + this.activeName;
      this.$refs[name].getList();
    },
    returnBoxData(data) {
      if (data.content) {
        return data.content;
      }
    },
    getList() {
      this.$nextTick(() => {
        this.$refs.detailTabList1.getList();
      });
    },
  },
};
</script>
